<template>
  <div class="my-chart" ref="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "my-echarts",
  props: {
    title: {
      type: String,
      default: "绘图结果",
    },
    x: {
      type: Array,
      required: true,
    },
    y: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      const myChart = echarts.init(this.$refs.myChart);

      console.log(this.x);
      console.log(this.y);

      myChart.setOption({
        title: {
          text: this.title,
        },
        xAxis: {
          data: this.x,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.y,
            type: "line",
            smooth: true,
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.my-chart {
  width: 100%;
  height: 420px;
}
</style>
